<template>
    <div>
        <uni-popup ref="userInfo" type="bottom">
            <div class="improve_user_info">
                <div class="title">
                    <span @click="cancel" style="color: #999">取消</span>
                    <p>编辑个人资料</p>
                    <span @click="confirm" style="color: #002a4f">确定</span>
                </div>
                <div class="avator">
                    <pub-upload-img width="120rpx" height="120rpx" v-model="avatorUrl"></pub-upload-img>
                    <i class="icon-camera1"></i>
                </div>
                <div class="cell">
                    <div class="cell_item">
                        <span>姓名</span>
                        <div class="value">
                            <input type="text" v-model="userName" placeholder="请填写本人姓名" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>地区</span>
                        <div class="value">
                            <pub-area-picker @change="areaPickerChange" :showArea="false">
                                <div class="city_name flex">
                                    <p class="flex-1" :class="{placeholder: !city}">{{city ? province + '-' + city : '请选择地区'}}</p>
                                    <i class="fs20 color-999 icon-arrow-right"></i>
                                </div>
                            </pub-area-picker>
                        </div>
                    </div>
                    <!-- <div class="cell_item">
                        <span>微信号</span>
                        <div class="value">
                            <input type="text" v-model="wxnum" placeholder="请输入本人微信号" placeholder-class="placeholder">
                        </div>
                    </div> -->
                    <div class="cell_item">
                        <span>微信二维码</span>
                        <div class="value">
                            <div class="mar-l20 pad10">
                                <pub-upload-img 
                                    width="100rpx"
                                    height="100rpx"
                                    upDes=""
                                    v-model="wxacodeUrl" 
                                    class="whfull"></pub-upload-img>
                            </div>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span>手机号</span>
                        <div class="value">
                            <input type="text" v-model="userPhone" placeholder="请输入本人手机号" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item" v-if="showSmsCode">
                        <span>验证码</span>
                        <div class="flex value">
                            <div class="flex-1">
                                <input type="text" v-model="smsCode" placeholder="请输入验证码" placeholder-class="placeholder">
                            </div>
                            <div @click="sendSmsCode" class="send_btn" :class="{disabled: smsCutdown != 60 }">
                                {{ smsCutdown == 60 ? '获取验证码' : smsCutdown + 's后重新发送'}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </uni-popup>
    </div>
</template>

<script>
import { sendSmsCode, editUserCardInfo } from '@/request/relationship'
export default {
    data() {
        return {
            promiseResolve: null,
            avatorUrl: '',
            userName: '',
            province: '',
            city: '',
            userPhone: '',
            temUserPhone: '',
            wxnum: '',
            wxacodeUrl: '',

            smsCode: '',
            smsCutdown: 60,
            timer: null
        }
    },
    computed: {
        showSmsCode() {
            return (this.temUserPhone && this.temUserPhone.length == 11 && this.temUserPhone != this.userPhone) || !this.temUserPhone
        }
    },
    mounted() {
        // setTimeout(() => {
        //     this.edit()
        // })
    },
    methods: {
        edit(userInfo) {
            return new Promise((resolve, reject) => {
                this.avatorUrl = userInfo.headImg || ''
                this.userName = userInfo.userName || ''
                this.province = userInfo.province || ''
                this.city = userInfo.city || ''
                this.userPhone = userInfo.userPhone || ''
                this.temUserPhone = userInfo.userPhone || ''
                this.wxnum = userInfo.wxnum || ''
                this.wxacodeUrl = userInfo.wxacodeUrl || ''
                this.smsCode = ''
                this.timer = null
                this.smsCutdown = 60

                this.$refs.userInfo.open()
                this.promiseResolve = resolve
            })
        },
        sendSmsCode() {
            let mobile = this.userPhone
            if(!/^1\d{10}$/.test(mobile.trim())) return this.$interact.toast('请输入正确的手机号')
            if(this.smsCutdown != 60) return
            sendSmsCode({
                mobile: mobile,
                type: 'login'
            }).then(res => {
                this.smsCutdown = this.smsCutdown - 1
                let timer = setInterval(() => {
                    this.smsCutdown = this.smsCutdown - 1
                    if(this.smsCutdown <= 0) {
                        clearInterval(timer)
                        this.smsCutdown = 60
                    }
                }, 1000)
            })
        },
        areaPickerChange(e) {
            this.province = e.province
            this.city = e.city
        },
        cancel() {
            this.$refs.userInfo.close()
        },
        confirm() {
            if(!this.userName) return this.$interact.toast('请填写本人姓名')
            if(!this.city) return this.$interact.toast('请选择地区')
            // if(!this.wxnum) return this.$interact.toast('请输入本人微信号')
            // if(!this.wxacodeUrl) return this.$interact.toast('请输入本人微信号')
            if(!this.userPhone) return this.$interact.toast('请输入本人手机号')
            if(this.showSmsCode && !this.smsCode) return this.$interact.toast('请输入验证码')
            editUserCardInfo({
                headImg: this.avatorUrl,
                province: this.province,
                city: this.city,
                userName: this.userName,
                userPhone: this.userPhone,
                wxnum: this.wxnum,
                wxacodeUrl: this.wxacodeUrl,
                smsCode: this.smsCode,
            }).then(res => {
                this.$refs.userInfo.close()
                this.promiseResolve()
            })
        }
    }

}
</script>

<style lang="less" scoped>
.improve_user_info{
    width: 100%;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    .title{
        height: 100rpx;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        span{
            width: 90rpx;
            text-align: center;
        }
        p{
            flex: 1;
            text-align: center;
            font-size: 34rpx;
            font-weight: bold;
        }
    }
    .avator{
        width: 120rpx;
        height: 120rpx;
        position: relative;
        border-radius: 50%;
        margin: 30rpx auto;
        .icon-camera1{
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            font-size: 20rpx;
            .align(center);
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .uploader{
            border-radius: 50%;
            overflow: hidden;
        }
    }
    .cell{
        padding: 0 30rpx;
        font-size: 32rpx;
        .cell_item{
            width: 100%;
            min-height: 100rpx;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            >span{
                width: 180rpx;
                &::after{
                    content: "*";
                    color: red;
                }
            }
            .value{
                flex: 1;
                input{
                    width: 100%;
                    height: 100rpx;
                }
                .city_name{
                    width: 500rpx;
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                }
                .send_btn{
                    font-size: 28rpx;
                    color: #002a4f;
                    line-height: 100rpx;
                    &.disabled{
                        color: #999;
                    }
                }
            }
        }
    }
}

</style>